<template>
  <div class="loading">
    <div class="AssetsManagement">
      <div class="searchBox">
        <div>
          <div class="searchBoxTitle">选择分区</div>
          <el-input class="search1" placeholder="请输入角色名称"></el-input>
        </div>
        <div class="newButton" @click="search()">搜索</div>
        <div class="newButton" @click="addData()">编辑权限</div>
      </div>
      <div class="tableBox">
        <el-tree :data="data2" :props="defaultProps"></el-tree>

        <!--新增对话框-->
        <el-dialog
          title="资产管理"
          :visible.sync="dialogFormVisible"
          :close-on-click-modal="false"
          :show-close="false"
          width="60%"
        >
          <el-tree :data="data2" show-checkbox node-key="id" :props="defaultProps"></el-tree>
          <div slot="footer" class="dialog-footer" align="center">
            <el-button type="primary" @click="confirm()">修 改</el-button>
            <el-button @click="cancel()">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeviceManagement',
  data () {
    return {
      loading: true, // 等待效果
      dialogFormVisible: false, // 对话框关闭

      // 以上必备项结束，下面为不同页面数据
      value: '', // 下拉框value
      data2: [{ // tree
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: { // tree 配置选项
        children: 'children',
        label: 'label'
      }
    }
  },

  methods: {
    // 添加数据
    addData () {
      this.dialogFormVisible = true
    },

    // 点击修改按钮
    confirm () {
      this.dialogFormVisible = false
    },
    // 取消修改
    cancel () {
      this.form = {}
      this.dialogFormVisible = false
    }

  }
}
</script>
<style scoped>
.AssetsManagement {
  width: 100%;
  min-height: 100%;
  background: #003a62;
  box-sizing: border-box;
}
.title {
  margin-bottom: 30px;
}
.userInfo {
  position: relative;
  width: 550px;
  padding: 35px;
}
</style>
